<template>
  <div class="card-content-list-item" >
    <div
         style="width: 100%;display: flex;align-items: center;">
      <div class="card-content-list-item-left-icon"
           style="width: 6px;height: 100%;display: inline-block;"
           :style="{ backgroundColor: connectStatuStyle(itemInfo.sync.showStatus)}"></div>
      <div class="card-content-list-item-right">
        <div class="card-content-list-item-right-top">
          <div style="display: flex;
                justify-content: flex-start;
                flex: 1;
                align-items: center;">
            <div class="card-content-list-item-right-top-img"><img :src="itemInfo.icon"></div>
            <div class="card-content-list-item-right-top-content"
                 style="margin-left: 20px;width:660px">
              <div class="card-content-list-item-right-top-content-title item-info-title">
                <el-tooltip :open-delay="1000" v-if="itemInfo.name&&itemInfo.name.length>12"
                            class="item"
                            effect="dark"
                            :content="itemInfo.name"
                            placement="top">
                  <label>{{ itemInfo.name }}</label>
                </el-tooltip>
                <label v-if="!(itemInfo.name&&itemInfo.name.length>12)">{{ itemInfo.name }}</label>
                <el-tag v-if="itemInfo.sync.status && itemInfo.sync.group != 3"
                        :type="itemInfo.sync.status | lowercaseFilter"
                        size="mini">
                  <el-tooltip :open-delay="1000" class="item"
                              effect="dark"
                              :content="messageTooltipInfo(itemInfo)"
                              placement="right">
                    <div style="font-weight: 300;">
                      {{ messageInfo(itemInfo)}}
                    </div>
                  </el-tooltip>
                </el-tag>
              </div>
              <div style="display: flex;justify-content: flex-start;align-items: center;">
                <div v-if="itemInfo.sync.lastTime"
                     style="max-width: 270px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;">
                  {{ `${$t('custom.connector.lastSynchronised')} : ` }}
                  <span :style="{color:lastTimeFormat(itemInfo.sync)}"
                        :title="timeAreaFormat(itemInfo.sync.lastTime)"> {{timeAreaFormat(itemInfo.sync.lastTime)}} </span>
                </div>
                <div v-if="itemInfo.sync.lastTime"
                     style="
                    display: flex;
                    font-weight: 400;
                    color:rgba(0, 0, 0, 0.75);
                    font-size: 14px;
                    justify-content: space-between;
                    align-items: center;
                    margin-left: 20px;">
                  <div>{{ $t('custom.bots.type') }} : {{ itemInfo.type?itemInfo.type:'null' }}</div>
                </div>
              </div>
            </div>
              <div style="height:28px;line-height:28px;margin-left: 100px;display:flex;align-items:center;"
                  v-if="(itemInfo.sync.group===1||itemInfo.sync.group===2)&&itemInfo.sync.showStatus!==0&&itemInfo.showOnOff">
              <el-tooltip :open-delay="1000" v-if="itemInfo.onoff==='OFF'"
                          content="Stopped"
                          class="item"
                          effect="dark"
                          placement="top">
                <div class="cuifont icon_pause"
                     @click.stop="startStop(itemInfo)"
                     :loading="syncLoading"
                     style="color:#f56c6c;background-color: #fff1f0;border-radius:4px;text-align:center;font-size:14px;height:28px;width:28px;line-height:28px;margin-right:10px;font-weight: bold;">
                     </div>
              </el-tooltip>
              <el-tooltip :open-delay="1000" v-else
                          class="item"
                          content="Running"
                          effect="dark"
                          placement="top">
                <div class="cuifont icon_play item"
                @click.stop="startStop(itemInfo)"
                :loading="syncLoading"
                     style="color:#67c23a;background-color: #f0f9eb;border-radius:4px;text-align:center;font-size:14px;height:28px;width:28px;line-height:28px;margin-right:10px;font-weight: bold;"></div>
              </el-tooltip>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
// import { Component } from '@/views/modules/mspbots/Integrations/modules/Component.js'
import moment from 'moment'
export default {
  data () {
    return {
      syncLoading: false
    }
  },
  props: {
    itemInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showInter: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  created () {
  },
  methods: {
    startStop (data) {
      this.$emit('startStop', data)
    },
    messageInfo (itemInfo) {
      let temp = ''
      if (itemInfo.showTargetedMsg && itemInfo.sync.group === 2) {
        temp = this.splitStr(itemInfo.sync.targetedMsg)
      } else {
        if (itemInfo.sync.status === 'Success') {
          if (itemInfo.showSucessMsg) {
            temp = this.splitStr(itemInfo.sync.errorMsg)
          } else {
            temp = itemInfo.sync.status
          }
        } else {
          temp = this.splitStr(itemInfo.sync.errorMsg)
        }
      }
      return temp
    },
    messageTooltipInfo (itemInfo) {
      let temp = ''
      if (itemInfo.showTargetedMsg && itemInfo.sync.group === 2) {
        temp = itemInfo.sync.targetedMsg
      } else {
        if (itemInfo.sync.status === 'Success') {
          if (itemInfo.showSucessMsg) {
            temp = itemInfo.sync.errorMsg
          } else {
            temp = itemInfo.sync.status
          }
        } else {
          temp = itemInfo.sync.errorMsg
        }
      }
      return temp
    },
    splitStr (str) {
      if (this.showInter) {
        if (str && str.length > 10) str = str.substring(0, 10) + '...'
      } else {
        if (str && str.length > 60) str = str.substring(0, 60) + '...'
      }
      return str
    },
    limitStr (str) {
      if (str.length > 10) str = str.substring(0, 10) + '...'

      return str
    },
    connectStatuStyle (status) {
      if (status === 0) {
        return '#909399'
      }
      if (status === 1) {
        return '#138DC7'
      }
      if (status === 2) {
        return '#F56C6C'
      }
      if (status === 3) {
        return '#E6A23C'
      }
      if (status === 4) {
        return '#67C23A'
      }
    },
    showDetail (itemInfo) {
      this.titleInfo = {
        lastTime: this.itemInfo.sync.lastTime
      }
      this.logVisible = true
    },

    handleClose () {
      this.logVisible = false
    },
    timeAreaFormat (time) {
      if (time) {
        return moment.tz(time, this.$store.state.user.timezoneId).format('MM/DD/YYYY HH:mm') + ' ' + moment.tz(time, this.$store.state.user.timezoneId).format('zz')
      } else {
        return time
      }
    },
    lastTimeFormat (time) {
      let localTime = moment().utc().format()
      let diffDays = moment(localTime).diff(moment(time.lastTime), 'days')
      if (diffDays >= 1) {
        return '#f41d27'
      }
    }
  },
  filters: {
    lowercaseFilter (val) {
      if (val === 'Error') {
        val = 'danger'
      }
      return val.toLowerCase()
    }
  }

}
</script>

<style scoped lang="scss">
// @import "./connector.scss";
@import "@/views/modules/mspbots/Integrations/connector.scss";
::v-deep .log-drawer {
  .el-drawer__header {
    padding-bottom: 24px;
    margin-bottom: 0;
  }
  .el-drawer__body {
    height: 0;
    display: flex;
    flex-direction: column;
  }
}

.couserFail:hover {
  background-color: #ffeeee;
}
.curserGo:hover {
  text-decoration: underline;
  cursor: pointer;
}
.cuifont:hover {
  cursor: pointer;
}
.el-header,
.el-footer {
  text-align: center;
  line-height: 60px;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-main {
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-drawer {
  // width: 70%;
}

.warning-message {
  font-size: 14px;
  font-weight: 400;
  color: #a4a7b4;
  line-height: 23px;
  padding: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-message {
  font-size: 14px;
  font-weight: 400;
  color: #a4a7b4;
  line-height: 23px;
  padding: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-content-list-item {
  // height: 70px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px #f0f0f0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.01);
  margin-bottom: 10px;

}
</style>
<style scoped lang="scss">
.cuser:hover {
  cursor: pointer;
  color: #138dc7;
  background-color: #e6f7ff;
  border-radius: 4px;
}

.card-content-list-item {
  background: #ffffff;
  box-shadow: 0px 5px 8px 0px rgba(192, 192, 192, 0.28);
  .card-content-list-item-left-icon {
    border-radius: 4px 0 0 4px;
  }
  ::v-deep .connentor_drawer {
    // width: 796px !important;
    .el-drawer__header {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.75);
      padding: 15px;
      height: 54px;
      box-shadow: 0px 1px 0px 0px #f0f0f0;
      margin-bottom: 0;
    }

    .card-content-list-item {
      background: #ffffff;
      box-shadow: 0px 5px 8px 0px rgba(192, 192, 192, 0.28);
      .card-content-list-item-left-icon {
        border-radius: 4px 0 0 4px;
      }
    }
    .card-content-list-item-right
      .card-content-list-item-right-top
      .card-content-list-item
      .card-content-list-item-right-top {
      border: none !important;
    }
    .card-content-list-item-right {
      border: 0 !important;
      .card-content-list-item-right-top {
        height: 70px;
      }
    }
    .item-info-title {
      font-size: 14px;
      font-weight: 400;
      color: #2d405e;
      // line-height: 53px;
      font-size: 18px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
        font-weight: 300;
      }
    }

  }
}
.card-content-list-item-right
  .card-content-list-item-right-top
  .card-content-list-item
  .card-content-list-item-right-top {
  border: none !important;
}
.card-content-list-item-right {
  border: 0 !important;
  .card-content-list-item-right-top {
    height: 70px;
  }
}
.item-info-title {
  font-size: 14px;
  font-weight: 400;
  color: #2d405e;
  // line-height: 53px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  span {
    margin-left: 10px;
  }
}
.state-message {
  font-size: 14px;
  font-weight: 400;
  color: #a4a7b4;
  line-height: 14px;
}

</style>
